<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">

<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="description" content="an online bookstore with Django" />
<meta name="keywords" content="bookstore,django" />
<meta name="author" content="" />
<title>{% block title %} MyBookstore {% endblock %}</title>

<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>  
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>  
    <![endif]-->

<link href="/static/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
	padding-top: 60px;
	/* 60px to make the container go all the way to the bottom of the topbar */
}

span .input-query {
	max-width: 80px;
	padding: 19px 29px 29px;
	margin-top: 10px background-color:  #fff;
	border: 1px solid #e5e5e5;
}
</style>
{% block style%} {% endblock %}
<link href="/static/css/bootstrap-responsive.css" rel="stylesheet">
</head>
<body>

	{% block navbar %}
	<div class="navbar navbar-inverse navbar-fixed-top">
		<div class="navbar-inner">
			<div class="container">
				<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				</a>
				<a class="brand" href="#">Project name</a>
				<div class="nav-collapse collapse">
					{% if user.is_authenticated %}
						<p class="pull-right"> Welcome, {{ user.username }}
							<a href="{% url django.contrib.auth.views.logout %}" class="navbar-link pull-right">Sign out</a>
						</p>
					{% else %}
					<a href="{% url django.contrib.auth.views.login %}" class="navbar-link pull-right">Sign in</a>
					{% endif %}
					<form class="form-search pull-right" action="/bookstore/search/" method="get">
						<div class="input-append">
							<input type="text" class="span2 search-query" name="q">
							<button type="submit" class="btn" value="Search">Search</button>
						</div>
					</form>

					<ul class="nav">
						<li class="active"><a href="#">Home</a></li>
						<li><a href="#about">About</a></li>
						<li><a href="#contact">Contact</a></li>
					</ul>
				</div>
				<!--/.nav-collapse -->
			</div>
		</div>
	</div>
	{% endblock %}

	<div id="pagename" class="container">{% block pagename %} {% endblock %}</div>

	<div id="content" class="container">{% block content %} {% endblock %}</div>
	<script src="/static/js/jquery-1.8.3.min.js"></script>
	{% block js %}
	{% endblock %}
	<script>
	$(function () {
		{% block on_ready %}
		{% endblock %}
	});
	</script>
</body>
</html>
